﻿@page "/today"
@inject TaskServices TaskSvr

<PageHeader Title="@("我的一天")" Subtitle="@DateTime.Now.ToString("yyyy年MM月dd日")"></PageHeader>

@foreach (var item in taskDtos)
{
    <Card Bordered="true" Size="small" Class="task-card">
        <div class="task-card-item">
            @{
                var finishClass = new ClassMapper().Add("finish").If("unfinish", () => item.IsFinish == false);
            }
            <div class="@(finishClass.ToString())" @onclick="x => OnFinish(item)">
                <Icon Type="check" Theme="outline" />
            </div>
            <div class="title" @onclick="x=>OnCardClick(item)">
                <Text Strong> @item.Title</Text>
                <br />
                <Text Type="@TextElementType.Secondary">@item.Description</Text>
            </div>
            <div class="date">
                @item.PlanTime.ToShortDateString()
                <br />
                @{
                    int? days = (int?)item.Deadline?.Subtract(DateTime.Now.Date).TotalDays;
                }
                <span style="color:@(days switch { _ when days > 3 => "#ccc", _ when days > 0 => "#ffd800", _ => "#ff0000" })">
                    @item.Deadline?.ToShortDateString()
                </span>
            </div>
            <div class="del" @onclick="async e=>await OnDel(item)">
                <Icon Type="rest" Theme="outline" />
            </div>
            <div class="star" @onclick="x => OnStar(item)">
                <Icon Type="star" Theme="@(item.IsImportant ? "fill" : "outline")" />
            </div>
        </div>
    </Card>
}

<div class="task-input">
    <DatePicker Picker="@DatePickerType.Date" @bind-Value="@newTask.PlanTime" />
    <Input @bind-Value="@newTask.Title" OnkeyUp="OnInsert" />
</div>

@code{
    private List<TaskDto> taskDtos = new List<TaskDto>();

    protected async override Task OnInitializedAsync()
    {
        taskDtos = await TaskSvr.LoadToDay();

        await base.OnInitializedAsync();
    }


    private void OnStar(TaskDto task)
    {
        task.IsImportant = !task.IsImportant;
    }

    [Inject] public DrawerService DrawerSrv { get; set; }

    async void OnCardClick(TaskDto task)
    {
        var options = new DrawerOptions()
        {
            Title = task.Title,
            Width = 450,
        };
        await DrawerSrv.CreateDialogAsync<TaskInfo, TaskDto, TaskDto>(options, task);
        await InvokeAsync(StateHasChanged);
    }

    TaskDto newTask = new TaskDto() { PlanTime = DateTime.Now.Date };

    void OnInsert(KeyboardEventArgs e)
    {
        if (e.Code == "Enter")
        {
            taskDtos.Add(newTask);
            newTask = new TaskDto() { PlanTime = DateTime.Now.Date };
        }
    }

    [Inject] public ConfirmService ConfirmSrv { get; set; }

    public async Task OnDel(TaskDto task)
    {
        if (await ConfirmSrv.Show($"是否删除任务 {task.Title}", "删除", ConfirmButtons.YesNo, ConfirmIcon.Info) == ConfirmResult.Yes)
        {
            taskDtos.Remove(task);
        }
    }

    private void OnFinish(TaskDto task)
    {
        task.IsFinish = !task.IsFinish;
    }

}

<style>
    .task-card {
        margin-bottom: 3px;
    }

        .task-card:hover {
            background-color: #eee;
            margin-bottom: 3px;
        }

            .task-card:hover .del {
                color: #ff0000
            }

    .task-card-item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

        .task-card-item .finish {
            text-align: center;
            flex: 0 0 32px;
            font-size: 24px;
            margin-right: 10px;
        }

        .task-card-item .del {
            text-align: center;
            flex: 0 0 32px;
            font-size: 24px;
            margin-right: 10px;
            color: rgba(255, 0, 0, 0.00);
            cursor: pointer;
        }


        .task-card-item .star {
            text-align: center;
            flex: 0 0 32px;
            font-size: 24px;
            margin-left: 10px;
        }

        .task-card-item .title {
            flex: 1 1 auto;
            cursor: pointer;
        }

        .task-card-item .date {
            flex: 0 0 auto
        }

        .task-card-item .unfinish {
            color: white;
        }

            .task-card-item .unfinish:hover {
                color: #808080;
            }

    .task-input {
        display: flex;
        flex-direction: row
    }
</style>
